<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="700px" @closed="resetForm('form')">
			<div>
				<el-form ref="form" :rules="rules" :model="form" label-width="80px">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="模板名称" prop="name"><el-input v-model.trim="form.name"></el-input></el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="模板编号" prop="code"><el-input v-model.trim="form.code"></el-input></el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="模板类型">
								<el-select v-model="form.type" placeholder="请选择栏目模板">
									<el-option label="首页" value="0"></el-option>
									<el-option label="单篇文章" value="1"></el-option>
									<el-option label="列表页" value="2"></el-option>
									<el-option label="图片列表页" value="3"></el-option>
									<el-option label="书籍列表页" value="4"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="使用状态">
								<el-radio-group v-model="form.status">
									<el-radio label="1">使用</el-radio>
									<el-radio label="2">停用</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="排序" prop="orderBy">
								<el-input-number v-model="form.orderBy" :min="1" :max="1000" size="medium" label="排序"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="封面图" prop="orderBy">
								<img class="thumbnail" v-show="thumbnail" :src="thumbnail" alt="" />
								<el-popover placement="right" width="260" trigger="click">
									<el-table :data="form.fileList" size="mini">
										<el-table-column property="oldName" label="文件名"></el-table-column>
										<el-table-column property="address" label="选择">
											<template slot-scope="{ row }">
												<el-button-group>
													<el-button type="success" size="mini" @click="handleChecked(row)">选择</el-button>
												</el-button-group>
											</template>
										</el-table-column>
									</el-table>
									<el-button slot="reference" size="small">设置</el-button>
								</el-popover>
							</el-form-item>
						</el-col>
						<el-col :span="12"></el-col>
					</el-row>

					<el-form-item label="附件" prop="orderBy"><UploadFile multiple @e-fileData="saveFile" :defaultValue="fileList" /></el-form-item>
					<el-form-item label="备注" prop="des">
						<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.des"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" v-preventReClick @click="submitForm('form')">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	components: {
		UploadFile: () => import('@/components/uploadFile/index.vue')
	},
	data() {
		return {
			title: '新增',
			dialogVisible: false,
			form: {
				name: '',
				code: '',
				type: '1',
				status: '1',
				orderBy: 10,
				des: '',
				extFiledList: [],
				pic: '',
				fileList: [], //返回附件信息
				picInfo: {}
			},
			rules: {
				name: [{ required: true, message: '请输入栏目名称', trigger: 'blur' }]
			},
			fileList: [] //返回附件信息
		};
	},
	computed: {
		thumbnail() {
			return this.form.picInfo.httpUrl;
		}
	},
	mounted() {
		this.$bus.$on('showDialogWebTemplateAdd', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('showDialogWebTemplateAdd');
	},
	methods: {
		//显示弹窗
		init(row) {
			if (row) {
				this.form = { ...this.form, ...row };
				this.$set(this.form, 'id', row.id);
				this.fileList = row.fileList || [];
				this.form.picInfo = row.picInfo || {};
			} else {
				this.form = this.$options.data().form;
				this.$delete(this.form, 'id');
			}
			this.title = row ? '编辑' : '新增';
			this.dialogVisible = true;
		},
		saveFile(v) {
			this.form.fileList = v;
		},
		async submitForm(form) {
			this.$refs[form].validate(async valid => {
				if (valid) {
					let dispatchType = this.title == '新增' ? 'addWebTemplate' : 'updateWebTemplate';
					await this.$store.dispatch(dispatchType, this.form);
					this.done();
				}
			});
		},
		done() {
			this.dialogVisible = false;
			this.$bus.$emit('refreshWebTemplateList');
			this.$message({
				message: '操作成功',
				type: 'success'
			});
		},
		resetForm(form) {
			this.$refs[form].resetFields();
		},
		handleChecked(row) {
			this.form.pic = row.id;
			this.form.picInfo = row;
		}
	}
};
</script>
<style scoped>
.thumbnail {
	float: left;
	width: 74px;
	height: auto;
	padding: 2px;
	margin-right: 10px;
	border: 1px solid #eee;
}
</style>
